<template>
    <div class="new-discover" v-cloak :class="{'in-weixin': (!isApp)}" v-if="detailData && recList">
        <p class="column-name" v-if="detailData">
            <a href="javascript:void(0)" @click="getUrl()">
                <img src="../../../assets/image/newdiscover/labelblue.png" />
                {{detailData.artColumTitle}}
            </a>
        </p>
        <h2 class="detail-title" v-if="detailData">{{detailData.title}}</h2>
        <ul class="detail-info" v-if="detailData">
            <li>
                <img :src="detailData.editorIcon"/>
                <span>{{detailData.editor}}</span>
            </li>
            <li>
                <span>{{detailData.pageView | pageViewFormat}}</span>
                <span>{{detailData.publishDate | dateFormatTime}}</span>
            </li>
        </ul>
        <div class="content" v-if="detailData" v-html="detailData.content"></div>
        <ul class="tags" v-if="detailData && detailData.tags && detailData.tags.length > 0">
            <li v-for="(item, index) in detailData.tags"><a href="javascript:void(0)" @click="getTagUrl(item)">{{item.value}}</a></li>
        </ul>
        <ul class="share-tools" v-if="isApp">
            <li @click="addPraiceFn">
                <img src="../../../assets/image/newdiscover/praiseadd.png" v-if="detailData && addPraise "/>
                <img src="../../../assets/image/newdiscover/praise.png" v-if="detailData && (!addPraise)"/>
                <span v-if="detailData" :class="{'active': addPraise}">{{detailData.clickLike | pageViewFormat}}</span>
                <div class="add-praise" :class="{'active': addPraise && addPraiseOther}">
                    <img src="../../../assets/image/newdiscover/addone.png"/>
                </div>
            </li>
            <li @click="shareBtn">
                <img src="../../../assets/image/newdiscover/share.png"/>
                <span>分享</span>
            </li>
        </ul>
        <div class="recommend" :class="{active: !isApp}" v-if="recList && recList.length > 0">
            <div class="recommend-title">
                <span>精彩推荐</span>
            </div>
            <List :listData="recList" :isRecList="isRecList" :basicInfo="basicInfo" v-if="recList && recList.length > 0"></List>
        </div>
        <DownApp v-if="(!isApp)"></DownApp>
    </div>
</template>

<script>
    import url  from 'url';
    import qs from 'querystring';
    import common from '../../../assets/js/common';
    import List from '../components/listcomponent.vue';
    import DownApp from '../components/downapp.vue';

    export default{
        data (){
            return {
                basicInfo: {
                    appVersion: '4.1',
                    plateformType: 'both',
                    cityCode: '310100',
                    articleId: null,
                    artColumn: null,
                    deviceId: ''
                },
                isApp: common.isApp(),
                shareObj: {
                    friend: {
                        title: '',
                        desc: '',
                        link: '',
                        imgUrl: ''
                    },
                    friendQuan: {
                        title: '',
                        desc: '',
                        link: '',
                        imgUrl: ''
                    }
                },
                detailData: null,
                recList: [],
                isRecList: true,
                detailPromise: null,
                recListPromise: null,
                addPraise: false,
                addPraiseOther: false,
                isLoading: false
            };
        },
        components: {
            List: List,
            DownApp: DownApp
        },
        created (){
            let tar = url.parse(window.location.href).query;
            let tmpObj = qs.parse(tar);

            this.basicInfo.appVersion = tmpObj.appversion || '4.1';            // 默认版本
            this.basicInfo.plateformType = tmpObj.plateformtype || 'both';   // 默认平台 both android 和 ios 都可用
            this.basicInfo.cityCode = tmpObj.citycode || '310100';            // 城市code
            this.basicInfo.articleId = tmpObj.id || '';
            this.basicInfo.artColumn = tmpObj.artcolumn || '';

            let recListParams = {
                articleId: this.basicInfo.articleId,
                artColumn: this.basicInfo.artColumn,
                plateformType: this.basicInfo.plateformType,
                appVersion: this.basicInfo.appVersion
            };
            this.recListPromise = this.$http.get(common.isdev() + '/service/sayCars/relatedarticle/0', {params: recListParams});
        },
        mounted (){
            let _this = this;
            if (this.isApp) {
                lb.getDeviceInfo((res) => {
                    // 获取设备id
                    if (res.errorCode == '0') {
                        _this.getArticleDetail(res.text.deviceId);
                    } else {
                        _this.getArticleDetail('');
                    }
                });
            } else {
                _this.getArticleDetail('');
            }
            this.recListPromise.then((res) => {            // 相关文章请求
                if (!(res.body.errorCode * 1)) {
                    this.recList = res.body.result;
                }
            },(err) => {
                Toast('服务器异常');
            });
            common.ANA_AnalyticsScan();
        },
        methods: {
            getArticleDetail(deviceId) {
                this.basicInfo.deviceId = deviceId;
                let detailParams = {
                    articleId: this.basicInfo.articleId,
                    deviceId: deviceId
                };
                this.$http.get(common.isdev() + '/service/sayCars/article/0', {params: detailParams}).then((res) => {           // 文章详情页
                    if (!(res.body.errorCode * 1)) {
                        let result = res.body.result;
                        this.detailData = result;
                        document.title = result.title;
                        let columnVo = {
                            shareTitle: result.shareTitle,
                            shareSummary: result.shareSummary,
                            link: window.location.protocol + '//' + window.location.host + window.location.pathname + '?utm_source=share&id=' + this.basicInfo.articleId + '&artcolumn=' + this.basicInfo.artColumn ,
                            shareImg: result.shareImg
                        };
                        this.initShare(columnVo);
                        if (result.clickLikeStatus * 1) {
                            this.addPraise = true;
                            this.addPraiseOther = false;
                        }
                    }
                },(err) => {
                    Toast('服务器异常');
                });
            },
            addPraiceFn() {
                // 点赞效果
                if( this.isLoading) {
                    return false;
                }
                this.isLoading = true;
                this.$http.post(common.isdev() + '/service/discovery/dropALikeByDeviceId', {
                    articleId: this.basicInfo.articleId,
                    deviceId: this.basicInfo.deviceId || '0'
                }).then((res) => {
                    if (!(res.body.errorCode * 1)) {
                        if (this.detailData.clickLikeStatus * 1) {                  // 点赞过
                            this.addPraise = false;
                            this.detailData.clickLike = this.detailData.clickLike * 1 - 1;
                            this.detailData.clickLikeStatus = 0;
                            this.addPraiseOther = false;
                        } else {
                            this.addPraise = true;                                  // 未点赞
                            this.detailData.clickLike = this.detailData.clickLike * 1 + 1;
                            this.detailData.clickLikeStatus = 1;
                            this.addPraiseOther = true;
                        }
                    } else {
                        Toast('服务器异常');
                    }
                    setTimeout(() => {
                        this.isLoading = false;
                    }, 800);
                }, (err) => {
                    Toast('服务器异常');
                    setTimeout(() => {
                        this.isLoading = false;
                    }, 800);
                });
            },
            initShare(shareData) {
                this.shareObj = {
                    friend: {
                        title: shareData.shareTitle,
                        desc: shareData.shareSummary,
                        link: window.location.protocol + '//' + window.location.host + window.location.pathname + '?utm_source=share&id=' + this.basicInfo.articleId + '&artcolumn=' + this.basicInfo.artColumn ,
                        imgUrl: 'https:' + shareData.shareImg
                    },
                    friendQuan: {
                        title: shareData.shareTitle,
                        desc: shareData.shareSummary,
                        link: window.location.protocol + '//'+ window.location.host + window.location.pathname + '?utm_source=share&id=' + this.basicInfo.articleId + '&artcolumn=' + this.basicInfo.artColumn ,
                        imgUrl: 'https:' + shareData.shareImg
                    }
                };
                if(!common.isApp()){
                    common.wxShare(this);
                }else{
                    setTimeout(() => {
                        // 延迟调用 lb的展示分享按钮，不然android和ios下有一定概率无法显示，具体原因未明
                        common.appShare(this);
                    }, 1000);
                }
            },
            share() {
                lb.shareInfo({
                    title: this.shareObj.friend.title,
                    url: this.shareObj.friend.link,
                    content: this.shareObj.friend.desc,
                    imgUrl: this.shareObj.friend.imgUrl
                } ,(data) => {
                    if (data.errorCode === 0) {
                        Toast('分享成功');
                    }else{
                        Toast('分享失败');
                    }
                });
            },
            shareBtn() {
                this.share();
            },
            getUrl() {
                let hostName = window.location.origin;
                let preUrl = hostName + '/newdiscover/list/list.html?artcolumn='+ this.basicInfo.artColumn+'&appversion='+ this.basicInfo.appVersion+'&plateformtype='+this.basicInfo.plateformType+'&citycode='+this.basicInfo.cityCode;
                let prdUrl = hostName + '/cx/cxj/cxjweb/newdiscover/list/list.shtml?artcolumn='+ this.basicInfo.artColumn+'&appversion='+ this.basicInfo.appVersion+'&plateformtype='+this.basicInfo.plateformType+'&citycode='+this.basicInfo.cityCode;
                if (common.isApp()) {
                    if (common.isHtml() === 'html') {
                        window.location.href = preUrl;
                    } else {
                        lb.newWebview({'url': prdUrl});
                    }
                } else {
                    if (common.isHtml() === 'html') {
                        window.location.href = preUrl;
                    } else {
                        window.location.href = prdUrl;
                    }
                }
            },
            getTagUrl(item) {
                let hostName = window.location.origin;
                let preUrl = hostName + '/newdiscover/taglist/taglist.html?typevalue='+ item.key + '&title=' + window.encodeURIComponent(item.value);
                let prdUrl = hostName + '/cx/cxj/cxjweb/newdiscover/taglist/taglist.shtml?typevalue='+ item.key + '&title=' + window.encodeURIComponent(item.value);
                if (common.isApp()) {
                    if (common.isHtml() === 'html') {
                        window.location.href = preUrl;
                    } else {
                        lb.newWebview({'url': prdUrl});
                    }
                } else {
                    if (common.isHtml() === 'html') {
                        window.location.href = preUrl;
                    } else {
                        window.location.href = prdUrl;
                    }
                }
            }
        }
    }
</script>

<style lang="scss">
    @import '../../../assets/css/common';
    body {
        background: #f5f5f5;
        .dropload-refresh, .dropload-update, .dropload-load, .dropload-noData{
            color: #8392A0;
            font-size: 13px;
        }
    }
    .new-discover {
        padding-left: 1.5rem;
        background: #fff;
        .detail-title {
            padding-right: 1.5rem;
            padding-bottom: 1.5rem;
            font-size: 2.3rem;
            font-weight: bolder;
        }
        .column-name {
            margin-left: -0.5rem;
            padding: 1.5rem 0;
            padding-right: 1.5rem;
            font-size: 1.3rem;
            a {
                display: block;
                color: #0084ff;
                img {
                    height: 2rem;
                    vertical-align: middle;
                }
            }
        }
        .detail-info {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            padding-right: 1.5rem;
            color: #999;
            font-size: 1.3rem;
            li {
                flex: 1;
                img {
                    width: 2.3rem;
                    height: 2.3rem;
                    border-radius: 50%;
                }
                &:last-child {
                    padding-top: 0.5rem;
                    text-align: right;
                    span {
                        display: inline-block;
                        padding: 0 1rem 0 2rem;
                    }
                    span:nth-of-type(1) {
                        background: url('../../../assets/image/newdiscover/see.png') left center no-repeat;
                        background-size: contain;
                    }
                    span:nth-of-type(2) {
                        background: url('../../../assets/image/newdiscover/time.png') left center no-repeat;
                        background-size: contain;
                    }
                }
            }
        }
        .content {
            padding-top: 2rem;
            padding-right: 1.5rem;
            font-family:-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            font-size: 1.7rem;
            line-height: 2.8rem;
            color: #333;
            img {
                width: 100%;
            }
        }
        .tags {
            margin-top: 2.2rem;
            font-size:1.3rem;
            li {
                display: inline-block;
                margin-right: 1rem;
                padding: 0 8px;
                border: 0.5px solid #e6e6e6;
                border-radius: 1.4rem;
                background: #fbfbfb;
                color: #666;
                line-height: 1.8rem;
                a {
                    color: #666;
                    font-size: 1.3rem;
                }
            }
        }
        @keyframes praise {
            0%{
                transform: translateY(-50%);
                opacity:0.5;
            }
            33%{
                transform: translateY(-100%);
                opacity: 1;
            }
            66% {
                transform: translateY(-100%);
                opacity: 1;
            }
            100%{
                transform: translateY(-150%);
                opacity: 0;
            }
        }
        .share-tools {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            margin: 5rem 0;
            padding-right: 1.5rem;
            color: #243742;
            font-size: 1.5rem;
            li {
                flex: 0 0 14.6rem;
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                align-items: center;
                width: 108px;
                height: 40px;
                border: 1px solid #e6e6e6;
                border-radius: 28px;
                line-height: 40px;
                img {
                    padding-right: 15px;
                    height: 1.4rem;
                }
                &:first-of-type {
                    margin-right: 2.5rem;
                    position: relative;
                    span.active {
                        color: #0084ff;
                    }
                    .add-praise {
                        position: absolute;
                        width: 100%;
                        top: 0;
                        left: 0;
                        text-align:center;
                        opacity: 0;
                        &.active {
                            animation: praise 2s linear 0s 1;
                            animation-fill-mode: forwards;
                        }
                    }
                }
            }
        }
        .recommend {
            &.active {
                margin-top: 5rem;
                margin-bottom: 3rem;
            }
            .recommend-title {
                background: url('../../../assets/image/newdiscover/line.png') left center repeat-x;
                font-size: 1.2rem;
                span {
                    padding-right: 0.9rem;
                    background: #fff;
                }
            }
            .discover-list {
                padding: 0;
                .list-layout-1{
                    margin-top: 0;
                    padding: 1.5rem 1.5rem 1.5rem 0;
                    border: 0;
                    border-bottom: 1px solid #e7e7e7;
                }
                .list-layout-3, .column-wrapper, .adv, .list-layout-0 {
                    display: none;
                }
                &:last-child {
                    .list-layout-1 {
                        border-bottom: 0;
                    }
                }
            }
        }

    }
</style>
